<template name="IndexHeader">
	<view class="index-header" >
		<view class="index-top" :style="{height:height+'px'}"></view>
		<view class="flex" >
			<input class="search" 
				type="text"
				confirm-type="search"
				:placeholder="placeholdername"
				:value="currentValue"
				@input.stop="handleInput"
				@confirm.stop="$emit('confirm')"
			>
			<text @click.stop="clear" v-if="currentValue" class="icon" >x</text>
		</view>
	</view>
</template>
 
<script>
    export default {
        name: "IndexHeader",
        props: {
			iStatusBarHeight:{
				type: String
			},
            value: {  //搜索框输入的值
				type: String
			},
			placeholdername:{ //搜索框提示文字，默认为请输入
				type: String,
				default:'请输入目的地/关键字'
			},
			confirm:{ //搜索框回车确定方法
				type: String
			},
        },
        data () {
            return {
				height:null,//获取的状态栏高
               currentValue:this.value//不直接绑定props,根据props里的value初始化自己的值
            }
        },
		  onLoad(){
		            var _this=this;
		            // 获取手机状态栏高度
		            uni.getSystemInfo({
		                success:function(data){
		                    // 将其赋值给this
		                    _this.height=data.statusBarHeight;
							console.log(data.statusBarHeight);
		                }
		            })
		        },
        methods: {
			//获取搜索框输入的值
			handleInput(e) {
				this.currentValue = e.target.value;
				this.$emit('input', e.target.value); //向父组件发射输入框输入的数据
			},
			//清空搜索内容
			clear(){
				this.currentValue = ''
				this.$emit('inputclear','') //向父组件发射清除数据
			}
        }
    }
</script>
 
<style lang="scss">
    .index-header{
		
		width: 100%;
		margin: 20rpx 0;
		position: relative;
		
		/* align-items: center;
		justify-content: center; */
		background: #fff;
		font-size: 26rpx;
		.index-top{
			 height: var(--status-bar-height);
			 width: 100%;
		}
    	.flex{
    		background-color: #f5f7fa;
			border-radius: 10upx;
			display: flex;
			width: 100%;
    	}
    	.icon{
    		width: 30rpx;
			height: 70rpx;
			flex: 1;
			text-align: center;
			line-height: 70rpx;
    	}
    	.search{
			flex: 7;
    		border: 0;
			font-size: 30upx;
			line-height: 70rpx;
			width: 96%;
			padding:0 2%;
			height: 70rpx;
    	}
	}
</style>